<!-- 设备完好状态 -->
<template>
  <pageHeader
    :title="title"
    :breadCrumb="breadCrumb"
    :show-back="true"
  ></pageHeader>
  <div class="content">
    <!-- <a-button type="primary" size="large" @click="add">
      <template #icon>
        <icon-plus />
      </template>
      <template #default>新增状态</template>
    </a-button> -->
    <div class="table">
      <TableTurn
        style="padding: 20px"
        :tableData="getData"
        :args="args"
        ref="tableTurnRef"
        :is-show-pagination="false"
      >
        <a-table-column align="center" :width="80">
          <template #title> 序号 </template>
          <template #cell="{ rowIndex }">
            {{ rowIndex + 1 }}
          </template>
        </a-table-column>
        <a-table-column data-index="name" align="center" title="设备完好状态">
          <template #cell="{ record }">
            <div
              :style="{
                color: record.color,
                backgroundColor: record.bac,
                width: '80px',
                margin: '0 auto'
              }"
            >
              {{ record.name }}
            </div>
          </template>
        </a-table-column>
        <a-table-column data-index="remark" align="center" title="备注">
        </a-table-column>
        <!-- <a-table-column align="center" :width="300" fixed="right" title="操作">
          <template #cell="{ record }">
            <a-button type="text" @click="goDetail(record)">编辑</a-button>
            <a-popconfirm
              @ok="deleteItem(record.id)"
              content="确定删除吗"
              type="error"
            >
              <a-button
                type="text"
                :style="{
                  color: 'red'
                }"
                >删除</a-button
              >
            </a-popconfirm>
          </template>
        </a-table-column> -->
      </TableTurn>
    </div>
    <modal
      v-model:visible="modalVisible"
      @addFaultTypeEmit="addFaultTypeEmit"
      :form="currForm"
    ></modal>
  </div>
</template>

<script lang="ts" setup>
  import { reactive, ref } from 'vue';
  import {
    GetEquipmentGoodState,
    PostEquipmentGoodState,
    DelEquipmentGoodState
  } from '@/api/equipment-management/base-setting/index';
  import modal from './components/add-fault-modal/index.vue';

  const title: string = '设备完好状态设置';
  const breadCrumb: string[] = ['设备管理', '基础设置', '设备完好状态设置'];

  // 表格配置
  const args = reactive({
    stripe: true,
    bordered: {
      headerCell: true
    }
  });

  let tableTurnRef = ref(); // 储存table的ref

  // 获取列表数据
  const getData = async () => {
    try {
      const res = await GetEquipmentGoodState({
        type: 3 // 默认传3
      });
      return Promise.resolve([
        { name: '完好', remark: '完好', color: '#4cd263', bac: '#e8ffea' },
        { name: '良好', remark: '良好', color: '#14c9c9', bac: '#dff8f8' },
        { name: '一般', remark: '一般', color: '#55a4fb', bac: '#e8f7ff' },
        { name: '较差', remark: '较差', color: '#f53f3f', bac: '#fffcfc' }
      ]);
    } catch (err: unknown) {
      console.log(err);
    }
  };

  let modalVisible = ref(false); // 判断弹出框是否显示
  let currForm = ref({
    remark: '',
    name: '',
    type: 3
  });

  // 新增故障类别
  const add = () => {
    currForm.value = {
      remark: '',
      name: '',
      type: 3
    };
    modalVisible.value = true;
  };

  // 去往编辑页面
  const goDetail = (row: any) => {
    currForm.value = row;
    modalVisible.value = true;
  };

  // 弹出框传回来的保存自定义事件
  const addFaultTypeEmit = async (form: any) => {
    try {
      const data: any = {
        name: form.name,
        remark: form.remark,
        type: form.type
      };
      if (form.id) {
        data.id = form.id;
      }
      await PostEquipmentGoodState(data);
      tableTurnRef.value.loadData();
    } catch (err: unknown) {
      console.log(err);
    }
  };

  // 删除一项
  const deleteItem = async (id: number) => {
    try {
      await DelEquipmentGoodState({ id });
      tableTurnRef.value.loadData();
    } catch (err: unknown) {
      console.log(err);
    }
  };
</script>

<style scoped lang="less">
  .content {
    padding: 10px 40px;

    .table {
      margin-top: 20px;
    }
  }
</style>
